import React from "react";
// 懒加载引入测试文件-->使用React.lazy,搭配Suspense组件一起使用(使用Suspense组件包裹懒加载的组件)
// Suspense组件-->在等待加载lazy组件时优雅降级-->显示loading组件等
// Suspense组件的fallback属性接收任何在组件加载过程中想展示的组件

// 引入Suspense组件
import { Suspense } from "react";

const Test = React.lazy(() => import("./test"));
class LoadLazy extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    }
  }
  clickHandle = () => {
    this.setState({
      flag: true
    })
  }
  render() {
    return (
      <>
        <h1>懒加载</h1>
        <button onClick={this.clickHandle}>加载组件</button>
        {
          this.state.flag && <Suspense fallback={<div>loading...</div>}>
            <Test />
          </Suspense>
        }
      </>
    )
  }
}
export default LoadLazy;